<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem to="/order">订单管理</BreadcrumbItem>
        <BreadcrumbItem>订单详情</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-hd">
            <div class="kui-hd-title">订单信息</div>
          </div>
          <div class="kui-item-bd device-management-box">
            <Row>
              <i-col span="8">订单编号：{{essentialInfor.no}}</i-col>
              <i-col span="8">下单时间：{{essentialInfor.created_at}}</i-col>
              <i-col span="8">客户ID：{{essentialInfor.customer_id}}</i-col>
              <i-col span="8">客户名称：{{essentialInfor.customer_name}}</i-col>
              <i-col span="8">订单价格：{{essentialInfor.price}}</i-col>
              <i-col span="8">付款方式：
                <span v-if="essentialInfor.paymode === 1">一次</span>
                <span v-else-if="essentialInfor.paymode === 2">分期</span>
                <span v-else>未知</span>
              </i-col>
              <i-col span="8">订单状态：
                <span v-if="essentialInfor.state === 1">已付清</span>
                <span v-else-if="essentialInfor.state === 2">未付清</span>
                <span v-else-if="essentialInfor.state === 3">已完成</span>
                <span v-else>未知</span>
              </i-col>
              <i-col span="8">下单人ID：{{essentialInfor.author_id}}</i-col>
              <i-col span="8">下单人名字：{{essentialInfor.author_name}}</i-col>
              <i-col span="8">备注信息：{{essentialInfor.info}}</i-col>
            </Row>
          </div>
        </div>

        <div class="kui-section-item">
          <div class="kui-item-hd">
            <div class="kui-hd-title">付款列表</div>
          </div>
          <div class="kui-item-bd device-management-box">
            <Table class="kui-table-bd" :columns="paymentTitle" :data="essentialPayment"></Table>
          </div>
        </div>
        <div class="kui-section-item">
          <div class="kui-item-hd">
            <div class="kui-hd-title">展位列表</div>
          </div>
          <div class="kui-item-bd device-management-box">
              <Table class="kui-table-bd"
                   :columns="boardTitle" 
                   :data="essentialBoard">
              </Table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
   data () {
     return {
      essentialInfor: {},
      essentialPayment: [],
      essentialBoard: [],
      paymentTitle:[
        {
          title: '付款ID',
          key: 'id',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '付款金额',
          key: 'money',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '付款时间',
          key: 'time',
          width: 320,
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '付款状态',
          key: 'state',
          align: 'center',
          ellipsis: 'true',
          render: (h, params) => {
            if( params.row.state === 1 ) {
               return h('Tag', '已付')
            }else if( params.row.state === -1 ) {
               return h('Tag', '未付')
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 140,
          align: 'center',
          render: (h, parent) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.ejectBtn(parent.row)
                    }
                  }
                },
                '付款'
              )
            ])
          }
        }
      ],
      boardTitle: [
        {
          title: '展位ID',
          width: 90,
          key: 'id',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '展位编号',
          width: 160,
          key: 'no',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '展位分类',
          key: 'cate',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '展位区域',
          key: 'area',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '展位规格',
          key: 'spec',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '展位地址',
          width: 220,
          key: 'address',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '开始时间',
          width: 200,
          key: 'start',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '结束时间',
          width: 200,
          key: 'end',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '备注信息',
          key: 'info',
          align: 'center',
          ellipsis: 'true'
        }
      ]
     }
   },
   methods: {
     //获取数据
    async getData(id) {
      const app = this
      let { data } = await app.$axios.get(`/user/v1/order/${id}`)
      if( data.code === 100 ) {
        app.essentialInfor = data.result.info,
        app.essentialPayment = data.result.payment,
        app.essentialBoard= data.result.board
      }
    },
    //修改数据弹出框
    ejectBtn(list) {
      const app = this
      app.temporaryData = { ...list }
      app.$Modal.confirm({
        title: '修改付款状态',
        render: h => (
          'div',
          {
            attrs: {
              class: 'bomb-box',
              style: 'padding-top: 24px;'
            }
          },
          [
            h(
              'Form',
              {
                props: {
                  model: app.temporaryData,
                  labelWidth: 80,
                  labelPosition: 'left'
                },attrs: {
                  style: 'padding-top: 24px;'
                }
              },
              [
                h('FormItem', {
                  props: {
                    label: '付款状态'
                  }
                }, [
                  h('Select', {
                    props: {
                      value: app.temporaryData.state
                    },
                    on: {
                      'on-change': val => {
                        app.temporaryData.state = Number(val)
                      }
                    }
                  },[
                      h('Option',{  
                          props: {  
                              value: 1
                          }  
                      },'已付'),  
                      h('Option',{  
                          props: {  
                              value: -1
                          }  
                      },'未付')  
                  ])
                ]),
              ]
            )
          ]
        ),
        okText: '保存',
        loading: true,
        onOk: () => {
          app.putData(list.id)
          this.$Modal.remove()
        }
      })
    },
    //修改数据
    async putData(id) {
      const app = this
      let { data } = await app.$axios.put(`/user/v1/payment/${id}`, app.temporaryData)
      if(data.code === 100){
        app.$Message.success(data.msg)
        app.getData(this.$route.query.id)
      }else{
        app.$Message.error(data.msg)
      }
    },
    mapJump(no){
      this.$router.push({
        path:'/map',
        query: {no}
      })
    }
   },
   created () {
     this.getData(this.$route.query.id)
   }
 }
</script>

<style lang="less" scoped>
@range: 24px;
.kui-section-item {
  &+.kui-section-item {
    margin-top: @range !important;
  }
}
.device-management-box {
  .ivu-row {
    .ivu-col {
      font-size: 14px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 2.4;
    }
  }
}
</style>
